<template>
  <div class="incolumn">
    <div class="incolumn_countr">
      <div class="block">
        <el-form :inline="true" :model="Pagination" class="demo-form-inline">
          <el-form-item label="输入搜索" class="s1">
            <el-input v-model="Pagination.key" placeholder="请输入快递单号" style="width:150%"></el-input>
          </el-form-item>
          <el-form-item label="输入时间" label-width="230px">
            <el-date-picker
              v-model="formInline.time1"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="chage"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onsubmit">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!-- =================列表表单 =====================  -->
    <div class="incolumn_from">
      <el-table
        :data="tableData_RECEIPT"
        style="width: 100%;background-color:#fff"
        :height="autoHeightTable"
        stripe
      >
        <el-table-column label="序号" align="center" type="index" width="170"></el-table-column>
        <el-table-column label="类型" align="center">
          <template v-slot="scope">
            <span v-if="scope.row.type==13">
              采购到货
            </span>
            <span v-if="scope.row.type==22">
              站点返件
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="numbering" label="采购单号/站点编号" align="center"></el-table-column>
        <el-table-column prop="companyName" label="供应商/站点" align="center">
        </el-table-column>
        <el-table-column prop="userName" label="申请人" align="center">
        </el-table-column>
        <el-table-column label="申请时间" align="center">
          <template v-slot="scope">
            {{ renderTime(scope.row.applyTime) }}
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center">
          <template v-slot="scope">
            <span v-show="scope.row.status==1">待审核</span>
            <span v-show="scope.row.status==2">驳回</span>
            <span v-show="scope.row.status==3">待收货</span>
            <span v-show="scope.row.status==4">待入库</span>
            <span v-show="scope.row.status==5">已入库</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button v-if="scope.row.status==4" type="primary" size="small"
                       @click="showDetail(scope.row.shengheMessageId,1,scope.row)">入库审核
            </el-button>
            <el-button type="primary" size="text" @click="showDetail(scope.row.shengheMessageId,2,scope.row)">详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="bottom_slate">
        <el-pagination
          background
          layout="prev, pager, next"
          :current-page="Pagination.current"
          :page-size="Pagination.pagesize"
          @current-change="handleCurrentChange"
          :page-count="Pagination.total"
        ></el-pagination>
      </div>
      <!--============弹框==================-->
      <el-dialog
        append-to-body
        :visible.sync="dialogVisible_detail"
        width="55%"
      >
        <span v-if="isDetail"
              style="font-weight: 700;font-style: normal;font-size: 16px;color: #17233D;">入库记录：</span>
        <span v-else-if="isDetail==false"
              style="font-weight: 700;font-style: normal;font-size: 14px;color: #17233D;">{{ title }} </span>
        <div v-show="isDetail==true&&type_info==13"
             style="width: 100%;border-top: 1px solid rgb(237, 239, 240);margin-top: 15px">
          <el-table
            :data="tableData_WAREHOUSELOG"
            style="width: 100%;height: 250px" :max-height="250">
            <el-table-column
              type="index"
              label="序号"
              align="center"
              width="120">
            </el-table-column>
            <el-table-column
              prop="productNumber"
              label="产品编号" align="center"
              width="180">
            </el-table-column>
            <el-table-column
              prop="productName" align="center"
              label="产品名称">
            </el-table-column>
            <el-table-column
              prop="number" align="center"
              label="发货数量">
            </el-table-column>
            <el-table-column
              prop="chengpinkuNumber" align="center"
              label="成品数量">
            </el-table-column>
            <el-table-column
              prop="feipinkuNumber" align="center"
              label="废品数量">
            </el-table-column>
          </el-table>
        </div>
        <div v-show="isDetail==false&&type_info==13"
             style="width: 100%;border-top: 1px solid rgb(237, 239, 240);margin-top: 15px">
          <el-table
            :data="tableData_WAREHOUSE"
            style="width: 100%">
            <el-table-column
              prop="productName"
              align="center"
              label="产品名称"
              width="180">
            </el-table-column>
            <el-table-column
              prop="productNumber"
              align="center"
              label="产品图号"
              width="180">
            </el-table-column>
            <el-table-column
              prop="number"
              align="center"
              label="本次入库数量">
            </el-table-column>
            <el-table-column
              prop="chengpinkuNumber"
              align="center"
              label="成品库入库数量">
              <template v-slot="scope">
                <el-input @input="checkNumber(scope.$index)"
                          v-model="scope.row.chengpinkuNumber"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              prop="feipinkuNumber"
              align="center"
              label="废品库入库数量">
              <template v-slot="scope">
                <el-input @input="checkNumber(scope.$index)"
                          v-model="scope.row.feipinkuNumber"></el-input>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div v-show="isDetail==true&&type_info==22"
             style="width: 100%;border-top: 1px solid rgb(237, 239, 240);margin-top: 15px">
          <el-table
            :data="tableData_WAREHOUSELOG_FanJian"
            style="width: 100%;height: 250px" :max-height="250">
            <el-table-column
              type="index"
              align="center"
              label="序号"
              width="80">
            </el-table-column>
            <el-table-column
              prop="productName"
              align="center"
              label="物料名称"
              width="180">
            </el-table-column>
            <el-table-column
              prop="productTuhao"
              align="center"
              label="图号">
            </el-table-column>
            <el-table-column
              prop="returnNumber"
              align="center"
              label="返件数量">
            </el-table-column>
            <el-table-column
              prop="baozhiqiNumber"
              align="center"
              label="三包期数量">
            </el-table-column>
            <el-table-column
              prop="guoqiNumber"
              align="center"
              label="非三包期数量">
            </el-table-column>
            <el-table-column
              align="center"
              label="调货日期">
              <template v-slot="scope">
                <span>{{ renderTime(scope.row.tianhuoTime) }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div v-show="isDetail==false&&type_info==22"
             style="width: 100%;border-top: 1px solid rgb(237, 239, 240);margin-top: 15px">
          <el-table
            :data="tableData_WAREHOUSE_FanJian"
            style="width: 100%;height: 250px" :max-height="250">
            <el-table-column
              type="index"
              align="center"
              label="序号"
              width="80">
            </el-table-column>
            <el-table-column
              prop="productName"
              align="center"
              label="物料名称"
              width="180">
            </el-table-column>
            <el-table-column
              prop="productTuhao"
              align="center"
              label="图号">
            </el-table-column>
            <el-table-column
              prop="returnNumber"
              align="center"
              label="返件数量">
            </el-table-column>
            <el-table-column
              prop="baozhiqiNumber"
              align="center"
              label="三包期数量">
            </el-table-column>
            <el-table-column
              prop="guoqiNumber"
              align="center"
              label="非三包期数量">
            </el-table-column>
            <el-table-column
              align="center"
              label="调货日期">
              <template v-slot="scope">
                <span>{{ renderTime(scope.row.tianhuoTime) }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" v-if="isDetail==false" @click="confirmRuKu()">确 认</el-button>
          <el-button @click="dialogVisible_detail = false">取 消</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  inject: ['reload'],
  name: "ReceivingGoodsManage",
  components: {},
  data() {
    return {
      /*=====================弹框===========================*/
      dialogVisible_detail: false,
      /*================列表数据==========================*/
      type_info: 0,
      GlobalMessageId: null,
      title: "",
      isDetail: false,
      tableData_WAREHOUSE_FanJian:[],
      tableData_WAREHOUSELOG_FanJian: [],
      tableData_RECEIPT: [],
      tableData_WAREHOUSE: [],
      tableData_WAREHOUSELOG: [],
      /*===============================================*/
      formInline: "",
      /*=============分页=======================*/
      Pagination: {
        beginTime: "",
        endTime: "",
        key: "",
        total: 1,//总共页
        current: 1,//当前页
        pagesize: 10,//页面数据个数
      },
    };
  },
//监听属性 类似于data概念",
  computed: {
    autoHeightTable() {
      return document.documentElement.scrollHeight - 251 - 93
    }
  },
//监控data中的数据变化",
  watch: {},
//方法集合",
  methods: {
    //确认入库
    confirmRuKu() {
      //GlobalMessageId
      if (this.type_info == 22) {
        axios.post("/JX_java/warehouse/shouhuoguanli/rukuShenghe?shengheMessageId=" + this.GlobalMessageId, []).then(res => {
          console.log(res.data.data)
          if (res.data.data == "操作成功") {
            this.$message.success(res.data.data);
            this.reload();
            this.dialogVisible_detail = false;
          } else {
            this.$message.error(res.data.data);
          }
        })
      } else if (this.type_info == 13) {
        let param = [
          {
            "chengpinkuNumber": 0,
            "clientId": 0,
            "createonTime": "",
            "createonUserid": 0,
            "createonUsername": "",
            "danwei": "",
            "feipinkuNumber": 0,
            "gross": 0,
            "id": 0,
            "isJiesuan": 0,
            "moneySum": 0,
            "number": 0,
            "operationTime": "",
            "operationUserid": 0,
            "operationUsername": "",
            "porderProductId": 0,
            "price": 0,
            "productName": "",
            "productNumber": "",
            "saleslogId": 0,
            "sorderProductId": 0,
            "sorpId": 0,
            "status": 0,
            "supplierId": 0,
            "tableId": 0,
            "type": 0,
            "warehouseId": 0
          }
        ];
        let flag = 0;
        this.tableData_WAREHOUSE.forEach((e, i) => {
          let aa = parseInt(this.tableData_WAREHOUSE[i].chengpinkuNumber) + parseInt(this.tableData_WAREHOUSE[i].feipinkuNumber);
          if (this.tableData_WAREHOUSE[i].number != aa) {
            flag = 1;
            return
          }
          this.tableData_WAREHOUSE[i].chengpinkuNumber = parseInt(this.tableData_WAREHOUSE[i].chengpinkuNumber);
          this.tableData_WAREHOUSE[i].feipinkuNumber = parseInt(this.tableData_WAREHOUSE[i].feipinkuNumber)
          console.log(e, "参数")
        });
        if (flag != 0) {
          this.$message.error("必须一次性入库完");
          return;
        }
        axios.post("/JX_java/warehouse/shouhuoguanli/rukuShenghe?shengheMessageId="+this.GlobalMessageId, this.tableData_WAREHOUSE).then(res => {
          console.log(res.data.data);
          if (res.data.data == "操作成功") {
            this.$message.success(res.data.data);
            this.reload();
            this.dialogVisible_detail = false;
          } else {
            this.$message.error(res.data.data);
          }
        });
      }

    },
    //检查输入的值的合法性
    checkNumber(index) {
      const aa = parseInt(this.tableData_WAREHOUSE[index].chengpinkuNumber) + parseInt(this.tableData_WAREHOUSE[index].feipinkuNumber)
      if (this.tableData_WAREHOUSE[index].number < aa) {
        this.$message.error("最大只能输入值:" + this.tableData_WAREHOUSE[index].number);
        this.tableData_WAREHOUSE[index].chengpinkuNumber = 0;
        this.tableData_WAREHOUSE[index].feipinkuNumber = 0
        return
      }
    },
    async showDetailLog(id, type) {
      if (type == 2) {
        this.isDetail = true
        this.title = "入库详情"
        axios.get("/JX_java/warehouse/shouhuoguanli/getOrderDetails?purchaseOrderId=" + id + "&&status=" + 2).then(res => {
          this.tableData_WAREHOUSELOG = res.data.data
          console.log(res.data.data)
          this.dialogVisible_detail = true;
        })
      }
    },
    //产品的详情
    showDetail(id, type, e) {
      this.dialogVisible_detail = true;
      this.GlobalMessageId = id;
      if (type == 1) {//入库审核
        this.type_info = e.type;
        this.isDetail = false;
        this.title = "入库审核"
        if (e.type == 13) {//采购到货  tableData_WAREHOUSELOG
          axios.get("/JX_java/warehouse/receivingManagement/getshouhuoDetails?shenghemessageId=" + id + "&&type=" + e.type).then(res => {
            console.log(res.data.data.pojo)
            this.tableData_WAREHOUSE=[]
            this.tableData_WAREHOUSE = res.data.data.pojo.warehouseLogs
            this.tableData_WAREHOUSE.forEach((e, i) => {
              this.tableData_WAREHOUSE[i].chengpinkuNumber = 0
              this.tableData_WAREHOUSE[i].feipinkuNumber = 0
            })
          })
        } else if (e.type == 22) {//站点返件  tableData_WAREHOUSELOG_FanJian
          axios.get("/JX_java/warehouse/receivingManagement/getshouhuoDetails?shenghemessageId=" + id + "&&type=" + e.type).then(res => {
            console.log(res.data.data.pojo)
            this.tableData_WAREHOUSE_FanJian=[]
            this.tableData_WAREHOUSE_FanJian = res.data.data.pojo.productReturns
          })
        }
      } else if (type == 2) {//详情
        console.log(e.type)
        this.type_info = e.type;
        this.isDetail = true
        this.title = "入库详情"
        if (e.type == 13) {
          axios.get("/JX_java/warehouse/receivingManagement/getshouhuoDetails?shenghemessageId=" + id + "&&type=" + e.type).then(res => {
            console.log(res.data.data.pojo)
            this.tableData_WAREHOUSELOG=[]
            this.tableData_WAREHOUSELOG = res.data.data.pojo.warehouseLogs
          })
        }else if (e.type == 22) {
          axios.get("/JX_java/warehouse/receivingManagement/getshouhuoDetails?shenghemessageId=" + id + "&&type=" + e.type).then(res => {
            console.log(res.data.data.pojo)
            this.tableData_WAREHOUSELOG_FanJian=[]
            this.tableData_WAREHOUSELOG_FanJian = res.data.data.pojo.productReturns
          })
        }
        /*axios.get("/JX_java/warehouse/shouhuoguanli/getOrderDetails?purchaseOrderId=" + id + "&&status=" + 2).then(res => {
          console.log(res.data.data)
          this.tableData_WAREHOUSELOG = res.data.data
          console.log("tableData_WAREHOUSELOG", this.tableData_WAREHOUSELOG)
        });*/
      }
    },
    //列表获取
    getList() {
      const data = {
        "beginTime": this.Pagination.beginTime,
        "endTime": this.Pagination.endTime,
        "key": this.Pagination.key,
        "pageNum": this.Pagination.current,
        "pageSize": this.Pagination.pagesize,
        "type": 0
      }
      let message = JSON.parse(localStorage.getItem("message"));
      ///receivingManagement/getShenghemessageLis
      axios.post("/JX_java/warehouse/receivingManagement/getShenghemessageList", data).then(res => {
        console.log(res.data.data)
        let params = res.data.data;
        this.tableData_RECEIPT = params.content;
        this.Pagination.total = params.totalPages

      })
    },
    chage(e) {
      if (e) {
        this.Pagination.beginTime = e[0];
        this.Pagination.endTime = e[1];
      } else {
        this.Pagination.beginTime = '';
        this.Pagination.endTime = '';
      }
    },
    //格式化时间
    renderTime(date) {
      return date==null?"":date.substring(0, 10);

      // const dateee = new Date(date).toJSON();
      // if (date == null) {
      //   return "---";
      // } else {
      //   return new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '');
      // }
    },
    //分页方法
    handleCurrentChange(e) {
      this.Pagination.current = e;
      this.getList();
    },
    onsubmit() {
      this.getList();
    },
  },
//生命周期 - 创建之前",数据模型未加载,方法未加载,html模板未加载
  beforeCreate() {
  },
//生命周期 - 创建完成（可以访问当前this实例）",数据模型已加载，方法已加载,html模板已加载,html模板未渲染
  created() {
    this.getList();
  },
//生命周期 - 挂载之前",html模板未渲染
  beforeMount() {
  },
//生命周期 - 挂载完成（可以访问DOM元素）",html模板已渲染
  mounted() {
  },
//生命周期 - 更新之前",数据模型已更新,html模板未更新
  beforeUpdate() {
  },
//生命周期 - 更新之后",数据模型已更新,html模板已更新
  updated() {
  },
//生命周期 - 销毁之前",
  beforeDestroy() {
  },
//生命周期 - 销毁完成",
  destroyed() {
  },
//如果页面有keep-alive缓存功能，这个函数会触发",
  activated() {
  },
}
</script>

<style lang="scss" scoped>
.Suppliermanagement .search {
  height: 50px;
  border-radius: 5px;
  background-color: #fff;
  padding-left: 20px;
  padding-top: 10px;
  margin: 0 20px 20px;
}

.Suppliermanagement .demo-form-inline {
  display: inline-block;
}

.Suppliermanagement .el-pagination {
  margin-top: 15px;
  text-align: center;
}

.Suppliermanagement .ebtn {
  float: right;
  margin-right: 20px;
}

.bottom_slate {
  height: 60px;
  line-height: 40px;
  text-align: center;
}
</style>
